import { Fragment, Suspense } from "react";
import { Button,ConfigProvider,Spin } from "antd";
import 'antd/dist/reset.css'
import "./App.css"
import routes from "./rotuer/routes"
import appStyle from "./App.module.css"
import Login from "./pages/Login";
import {Link, Outlet} from 'react-router-dom'
//引入自己定义的守卫hook
import useRoutesWithGuard from "./rotuer/useGuard";
import LayoutBase from "./components/Layout";
// console.log(process.env)
const App=()=>{
  let element=useRoutesWithGuard('qf-token',routes)
  return (
   
    // <ConfigProvider theme={{token:{colorPrimary:'deeppink'}}}>
    //    <Fragment>
    //       <h1 className={[appStyle.ft,appStyle.bg].join(" ")}>1234</h1>
    //       <Button type="primary">Button</Button>
    //       <Login/>
    //    </Fragment>
    // </ConfigProvider>
    <div className="app">
     <LayoutBase>
          <Suspense>
            <Spin tip='正在加载' spinning={false} delay={10}>
                 {element}
            </Spin>
                 
          </Suspense>
     </LayoutBase>
       
    </div>
  )
}
export default App;
